<template>
  <div class="">
    <div class="headmainbox">
      <img src="@/assets/images/headmainimg.png" alt="" class="headmainimg" />
      <div class="headtitlebox" @click="gohome">
        <img src="@/assets/images/headicon.png" alt="" />
      </div>
      <div
        class="imessagebox"
        @mouseenter="showMessageBox"
        @mouseleave="hideMessageBox"
        @click="goimessage"
      >
        <a-badge
          :count="counttotal"
          :dotStyle="{
            boxShadow: 'none',
          }"
        >
          <img src="@/assets/images/imessage.png" alt="" class="imessage" />
        </a-badge>
        消息
      </div>

      <div
        v-if="isMessageBoxVisible"
        class="imessageboxxf"
        @mouseenter="stayMessageBoxVisible"
        @mouseleave="hideMessageBox"
      >
        <div class="imessageboxxftitle">消息</div>
        <div
          class="imessageboxxftitem"
          v-for="item in imessageyl"
          :key="item.msgNoticeId"
        >
          <div class="imessageboxxftitemtitle">
            <div class="imessageboxxftitemtitle1"
              >【{{ item.title }}】<div
                class="imessageboxxftitemicon"
                v-if="item.readStatus == 0"
              ></div
            ></div>
            <div class="imessageboxxftitemtitle2">{{
              formatDate(item.createTime)
            }}</div>
          </div>
          <div class="imessageboxxftitemdes">{{ item.content }}</div>
        </div>
        <div v-show="counttotal == 0" class="imessageboxxftitem">
          暂无消息
        </div>
        <div class="imessageboxxfbottom" @click="goimessage"
          >查看全部
          <img src="@/assets/images/caret-right-small.png" alt="" />
        </div>
      </div>
      <div class="fgf"></div>
      <div class="userbox" @click="userfn">
        <div class="useravatar">
          <img :src="base + studentdata.headPortraitUrl" alt="" />
        </div>
        <div class="username"> {{ userdata.studentName }}</div>
      </div>
      <div class="loginout" @click="handleLogout">
        <img src="@/assets/images/loginout.png" alt="" />
      </div>

      <!-- 菜单 -->
      <div class="headmenbox">
        <div
          :class="item.id == mensid ? 'mensitemhover' : ''"
          class="mensitem"
          v-for="item in mensdata"
          :key="item.id"
          @click="tag(item.id)"
        >
          <img :src="item.src" alt="" class="mensitemicon" />

          {{ item.name }}

          <div class="mensitemac" v-if="mensid == item.id"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, defineEmits, defineExpose } from 'vue';
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import useUser from '@/hooks/user';
  import { getUser, unreadList } from '@/api/tplist';

  import { storeToRefs } from 'pinia';
  import { useUserStore } from '@/store';
  const userStore = useUserStore();
  const userdata = storeToRefs(userStore);
  const studentdata = ref(userdata);
  const router = useRouter();
  const props = defineProps<{
    mensid: string;
  }>();
  const emit = defineEmits<{
    (event: 'customEvent', payload: any): void; // 定义自定义事件
  }>();
  const { logout } = useUser();
  const handleLogout = () => {
    logout();
  };
  const base = ref((window as any).config.VUE_APP_IMG_API);
  const isMessageBoxVisible = ref(false);
  const showMessageBox = () => {
    isMessageBoxVisible.value = true; // 鼠标进入 imessagebox 时显示
  };
  const hideMessageBox = () => {
    isMessageBoxVisible.value = false; // 鼠标离开时隐藏
  };
  const stayMessageBoxVisible = () => {
    isMessageBoxVisible.value = true; // 鼠标进入 imessageboxxf 时保持显示
  };
  const formatDate = (dateStr) => {
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };

  const counttotal = ref(0);
  const imessageyl = ref();

  const fetchData = () => {
    // 查询学生信息
    // getUser({}).then((res: any) => {
    //   if (res.code == 200) {
    //     console.log('查询学生信息完成', res.data);
    //     // studentId.value = res.data.studentId;
    //     userdata.value = res.data;

    //   }
    // });
    unreadList({
      studentId: userdata.studentId.value,
      pageSize: 1,
      pageNum: 3,
    }).then((res: any) => {
      if (res.code == 200) {
        counttotal.value = res.data.total;
        imessageyl.value = res.data.list;
      }
    });
  };
  fetchData();
  defineExpose({
    fetchData,
  });
  const userfn = () => {
    router.push({
      name: 'user',
    });
  };
  //   切换id

  const tag = (id) => {
    mensid.value = id;
    if (id == '1') {
      router.push({
        name: 'dashboard',
      });
    }
    if (id == '2') {
      router.push({
        name: 'casetype',
      });
    }
    if (id == '3') {
      router.push({
        name: 'user',
      });
    }
  };
  const gohome = () => {
    router.push({
      name: 'dashboard',
    });
  };
  const mensid = ref(props.mensid);

  const mensdata = ref([
    {
      id: '1',
      name: '图谱学习',
      src: new URL(`@/assets/images/mensitemicon1.png`, import.meta.url).href,
    },
    {
      id: '2',
      name: '病例列表',
      src: new URL(`@/assets/images/mensitemicon2.png`, import.meta.url).href,
    },
    {
      id: '3',
      name: '个人中心',
      src: new URL(`@/assets/images/mensitemicon3.png`, import.meta.url).href,
    },
  ]);

  const goimessage = () => {
    router.push({
      name: 'outlist',
    });
  };
</script>

<style scoped>
  .headmainbox {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    height: 64px;
  }
  .headmainimg {
    width: 1920px;
    height: 64px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
  }
  .headmenbox {
    height: 64px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 410px;
    transform: translate(0, -50%);
  }
  .headtitlebox {
    z-index: 9999;
    cursor: pointer;
  }
  .headtitle {
    font-size: 30px;
    font-weight: bold;
  }
  .headtitlebox img {
    width: 268px;
    height: 26px;
    margin-left: 20px;
  }
  .loginout {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
  }
  .loginout img {
    width: 32px;
    height: 32px;
  }
  .userbox {
    cursor: pointer;
    display: flex;
    z-index: 99;
    align-items: center;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translate(0, -50%);
  }
  .imessage {
    width: 32px;
    height: 32px;
  }
  .imessagebox {
    cursor: pointer;
    position: absolute;
    right: 200px;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 18px;
    color: #fff;
    display: flex;
    align-items: center;
  }
  .fgf {
    position: absolute;
    right: 180px;
    top: 50%;
    transform: translate(0, -50%);
    width: 0px;
    height: 22px;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #656467;
    z-index: 99;
  }
  .username {
    font-size: 14px;
    color: #fff;
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 10px;
  }
  .useravatar {
    width: 30px;
    height: 30px;
    border-radius: 24px 24px 24px 24px;
    border: 1px solid #dcdfe6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .useravatar img {
    width: 30px;
    height: 30px;
  }

  .mensitem {
    cursor: pointer;
    height: 55px;
    font-weight: 500;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 55px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 55px;
    position: relative;
  }
  .mensitem:hover {
    color: #ffffff;
  }
  .mensitem:nth-child(1) {
    margin-left: 0px;
  }
  .mensitemhover {
    color: #ffffff;
  }
  .mensitemac {
    width: 42px;
    height: 2px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .mensitemicon {
    width: 12px;
    height: 12px;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translate(0, -50%);
  }
  .imessageboxxf {
    display: none;
    width: 245px;
    max-height: 253px;
    background: linear-gradient(#ccd4df 0%, #ffffff 100%);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
    border-radius: 6px 6px 6px 6px;
    position: absolute;
    right: 185px;
    z-index: 9;
    top: 50px;
    display: flex;
    flex-direction: column;
    padding: 18px;
    z-index: 99999;
  }
  .imessageboxxftitle {
    font-size: 16px;
    color: #333333;
    margin-bottom: 15px;
  }
  .imessageboxxftitem {
    width: 209px;
    display: flex;
    flex-direction: column;
    border-top: 2px solid #a3a3a3;
    padding: 6px 0;
  }
  .imessageboxxftitemtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .imessageboxxftitemtitle1 {
    color: #333333;
    font-size: 14px;
    position: relative;
  }
  .imessageboxxftitemtitle2 {
    font-size: 10px;
    color: #999999;
  }
  .imessageboxxftitemdes {
    width: 209px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666666;
    font-size: 14px;
    margin: 5px 0;
  }
  .imessageboxxfbottom {
    text-align: center;
    color: #3d4957;
    font-size: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0 auto;
  }
  .imessageboxxfbottom img {
    width: 20px;
    height: 20px;
  }
  .imessageboxxf[v-if] {
    display: block;
    /* 当 v-if 为 true 时显示 */
  }

  .imessageboxxftitemicon {
    width: 4px;
    height: 4px;
    background: #e53737;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    top: 0px;
  }
</style>
